<template>
  <div class="content">
    <el-dialog
      :destroy-on-close="true"
      top="5vh"
      title="修改热点"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :destroy-on-close="true"
      top="5vh"
      title="查看大图"
      :visible.sync="ImgdialogVisible"
      width="60%"
    >
      <img :src="newList[img_index]?.img" alt="" id="dialog_img" />
      <span slot="footer">
        <el-button @click="ImgdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ImgdialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <h2>热点推荐</h2>
    <div class="item-bar">
      <el-input
        placeholder="请输入要搜索的内容"
        v-model="input3"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button type="primary" round>新增热点</el-button>
    </div>
    <el-empty :image-size="200" v-show="emptyShow"></el-empty>
    <template>
      <el-table
        v-show="!emptyShow"
        :data="newList"
        style="width: 100%"
        v-loading="!newList?.length"
        ref="table"
      >
        <el-table-column align="center" type="index" label="序号" :width="100">
        </el-table-column>
        <el-table-column :width="230" label="热点封面" align="center">
          <template slot-scope="scope">
            <div class="img">
              <img :src="newList[scope.$index]?.img" alt="" class="" />
              <div class="mask" @click="openImg(scope.$index)">
                <i class="el-icon-zoom-in"></i>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="title" align="center" label="热点标题">
        </el-table-column>
        <el-table-column prop="link" align="center" label="跳转视频">
          <!-- <template slot-scope="scope">
            <div class="img">
              <el-tag type="info">{{
                getDate(newList[scope.$index]?.time)
              }}</el-tag>
            </div>
          </template> -->
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="edit(scope.$index)"
              >修改</el-button
            >
            <el-button size="mini" @click="del(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      emptyShow: false,
      newList: [],
      ImgdialogVisible: false,
      img_index: null,
    };
  },
  mounted() {
    this.$axios("/news_list").then((res) => {
      this.newList = res.data;
    });
  },
  methods: {
    edit(index) {
      console.log("edit!", index);
      this.dialogVisible = true;
    },
    del(index) {
      console.log("del!", index);
    },
    openImg(index) {
      console.log("open!", index);
      this.ImgdialogVisible = true;
      this.img_index = index;
    },
  },
};
</script>
<style scoped lang="less">
.item-bar {
  .el-input {
    width: 50%;
    padding-bottom: 20px;
    margin-right: 5%;
  }
  & > .el-button {
    width: 120px;
    font-size: medium;
  }
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
#dialog_img {
  width: 100%;
}
.img {
  position: relative;
  img {
    border-radius: 10px;
    height: 100px;
    width: 80%;
  }
  .mask {
    border-radius: 10px;
    transition: 0.3s all;
    box-sizing: border-box;
    height: 100px;
    width: 80%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    &:hover {
      background: #22222250;
      opacity: 1;
    }
    i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 40px;
      color: #fff;
    }
  }
}
h2 {
  padding: 20px;
  margin-top: 0;
}
</style>
